import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/pages/classify/controller/classify_ctr.dart';
import 'package:cbec_app/pages/classify/entity/classify_data_entity.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

///分类页

class ClassifyPage extends GetView<ClassifyController> {
  const ClassifyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ClassifyController>(
      builder: (controller) => Scaffold(
        backgroundColor: Tools.fromHex('#FFFFFF'),
        appBar: AppBar(
          title: const Text(
            '分类',
            style: TextStyle(fontSize: 17, color: Colors.black, fontWeight: FontWeight.w500),
          ), // 设置页面标题
          centerTitle: true, // 标题居中显示
          backgroundColor: Tools.fromHex('#F4F4F4'),
          elevation: 0, // 去掉阴影
        ), // ,

        body: Column(
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(
                    height: MediaQuery.of(context).size.height - kToolbarHeight - kBottomNavigationBarHeight,
                    child: Row(
                      children: [
                        _buildClassifyItemWidget(),
                        _buildRightListWidget(),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 二级list样式
  Widget _buildRightListWidget() {
    ClassifyController controller = Get.find<ClassifyController>();
    return Container(
      color: Tools.fromHex('#FFFFFF'),
      padding: const EdgeInsets.symmetric(horizontal: 10),
      width: 375.w - 90.w,
      child: ListView.builder(
        itemCount: controller.secondList.length,
        itemBuilder: (context, index) {
          final level2Model = controller.secondList[index];
          print('level2Model ====== $level2Model');
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              (level2Model.image != null && level2Model.image!.isNotEmpty)
                  ? GestureDetector(
                      onTap: () {},
                      child: ClipRRect(
                        borderRadius: const BorderRadius.all(Radius.circular(8)),
                        child: Image.network(
                          level2Model.image ?? '',
                          height: 106.h,
                          width: double.infinity, // 或者设置具体宽度
                          fit: BoxFit.cover,
                        ),
                      ),
                    )
                  : const SizedBox(),
              // 二级分类名字
              SizedBox(
                height: 10.h,
              ),
              Row(
                children: [
                  Text(
                    level2Model.className ?? '',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Tools.fromHex('#333333'),
                    ),
                  ),
                  Icon(
                    Icons.navigate_next_rounded,
                    color: Tools.fromHex('#999999'),
                  )
                ],
              ),
              SizedBox(
                height: 10.h,
              ),
              (level2Model.children != null && level2Model.children!.isNotEmpty)
                  ? Wrap(
                      spacing: 10.0, // 水平方向的间距
                      runSpacing: 10.0, // 垂直方向的间距
                      alignment: WrapAlignment.start, // 对齐方式
                      children: List.generate(level2Model.children!.length, (index) {
                        final level3Model = level2Model.children![index];
                        return _build3LevelItemWidget(level3Model, () {
                          print('level2Model.id ==== ${level2Model.id}');
                          Get.toNamed('${Routes.filter}/?secondId=${level2Model.id}&id=${level3Model.id}');
                          // Get.toNamed('${Routes.filter}/?secondId=${level3Model.id}&id=${level2Model.id}');
                        });
                      }),
                    )
                  : const SizedBox(),
            ],
          );
        },
      ),
    );
  }

  // 三级item样式
  GestureDetector _build3LevelItemWidget(ClassifyDataChildrenChildren level3Model, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        width: 72.w, // 每个元素的宽度
        child: Column(
          children: [
            BaseImage(
              url: level3Model.image ?? '',
              height: 72.w,
              width: double.infinity, // 或者设置具体宽度
              fit: BoxFit.cover,
            ),
            const SizedBox(
              height: 5,
            ),
            Text(
              level3Model.className ?? '',
              style: TextStyle(fontSize: 12, color: Tools.fromHex('#000000')),
            ),
          ],
        ),
      ),
    );
  }

  // 一级分类样式
  Widget _buildClassifyItemWidget() {
    ClassifyController controller = Get.find<ClassifyController>();
    return Container(
      color: Tools.fromHex("#F4F4F4"),
      width: 90.w,
      child: ListView.builder(
        itemCount: controller.classifyLit.length,
        itemBuilder: (context, index) {
          final model = controller.classifyLit[index];
          return GestureDetector(
            onTap: () {
              controller.changeClassify(index); // 选择分类项
            },
            child: Container(
              color: model.isSelected ? Colors.white : Tools.fromHex("#F4F4F4"),
              height: 44,
              child: Stack(
                alignment: Alignment.centerLeft,
                children: [
                  Center(
                    child: Text(
                      model.className ?? '',
                      style: TextStyle(
                        fontSize: 13,
                        fontWeight: model.isSelected ? FontWeight.w700 : FontWeight.normal,
                        color: model.isSelected ? Tools.fromHex('#F83F2D') : Tools.fromHex('#000000'),
                      ),
                    ),
                  ),
                  Container(
                    height: 15,
                    width: 2,
                    color: model.isSelected ? Tools.fromHex('#F83F2D') : Colors.transparent,
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
